<template>
    <div class="app-container">
      <div>
        <el-row>
          <el-col :span="10">
            <span style="font-size: 16px;line-height: 40px;color: #000;">
              <i class="el-icon-s-unfold"></i>
              启动图列表</span>
          </el-col>
          <el-col :span="14" style="text-align: right;">
            <el-button @click="addBannersWay" icon="el-icon-circle-plus-outline" type="primary">添加启动图</el-button>
            <el-button @click="getBannersListWay" icon="el-icon-refresh" type="success">刷新</el-button>
          </el-col>
  
        </el-row>
        <el-row style="margin-top: 30px">
          <el-table v-loading="loading" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" highlight-current-row :data="bannerList" style="width: 100%">
            <el-table-column align="center" prop="title" label="名称">
            </el-table-column>
            <el-table-column align="center" prop="image_url" label="类型">
              <template slot-scope="scope">
                {{scope.row.type==1?'启动图':'引导图'}}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="image_url" label="图片">
            <template slot-scope="scope">
              <div style="width: 40px; height: 40px; margin: 0 auto">
                <el-image :src="scope.row.image_url" :preview-src-list="[scope.row.image_url]" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="redirect_url" label="跳转地址"/>

            <el-table-column align="center" fixed="right" width="150px" label="操作">
              <template slot-scope="scope">
                <el-button style="margin-right: 5px" type="text" size="mini" @click="puttagsWay(scope.row)">
                  编辑
                </el-button>
                <el-popconfirm title="这是一段内容确定删除吗？" @confirm="deltagsWay(scope.row)">
                  <el-button type="text" size="mini" slot="reference">
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row class="marginTop" style="text-align: right">
            <pagination v-show="total > 0" :total="total" :page.sync="listdata.page" :limit.sync="listdata.count"
            @pagination="getBannersListWay" />
      </el-row>
      </div>
  
      <el-drawer :modal-append-to-body="false" :append-to-body="true" title="设置" size="60%" :withHeader="false"
        :visible.sync="BannerDialog" @close="handleClose" :show-close="true">
        <div class="drawerTitle" style="margin-bottom: 30px;">
          <span>{{title}}</span>
          <div class="close" @click="handleClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 150px)">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
            v-loading="addPutLoading" style="margin-left: 20px;">
            <el-row :gutter="0">
              <el-col :span="8">
                <el-form-item label="名称" prop="title">
                  <el-input maxlength="6" show-word-limit v-model="ruleForm.title" placeholder="请输入名称"
                    clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="类型" prop="type">
                  <el-select v-model="ruleForm.type" style="width: 100%" filterable reserve-keyword placeholder=""
                    :loading="selectLoading">
                    <el-option v-for="item in goodsList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="状态" prop="status">
                   <el-radio-group v-model="ruleForm.status">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="跳转地址" prop="redirect_url">
                  <el-input v-model="ruleForm.redirect_url" placeholder="请输入路径/链接地址" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="图片" prop="image_url">
                  <logo-upload :single-file="image_url" :show-file-list="false" accept="image/jpeg, image/png"
                    @uploadCallback="image_urlCallback" />
                  <span style="color: #838383">仅支持.jpg、.png、.jpeg 格式，图标比例1：1,大小300k左右；</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-scrollbar>
        <div style="text-align: right;padding-right: 30px;">
          <el-button @click="BannerDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitWay">确 定</el-button>
        </div>
      </el-drawer>
  
    </div>
  </template>
  
  <script>
    import {
      addBanners,
      delBanners,
      getBannersList,
    } from "@/api/admin/activateimg";
    import LogoUpload from "@/components/FileUpload";
    export default {
      components: {
        LogoUpload,
      },
      data() {
        return {
          goodsList: [{
              name: '启动图',
              id: 1
            },
            {
              name: '引导图',
              id: 2
            }
          ],
          loading: false,
          title: "添加导航",
        bannerList: [],
  
          ruleForm: {
            status:1,
            switch:0,
            type: 1,
            title: "",
            image_url: "",
            redirect_url: "",
            sort: '',
          },
          listdata: {
            page: 1,
            count: 10,
            params:{
              
            },
          },
          total: 0,
          image_url: {},
          selectLoading: false,
          addPutLoading: false,
          rules: {
            title: [{
              required: true,
              validator: (rule, value, callback) => {
                const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
                if (!value) {
                  return callback(new Error("请输入名称"));
                } else {
                  if (req.test(value)) {
                    return callback(new Error("名称中不能包含特殊字符"));
                  } else {
                    callback();
                  }
                }
              },
              trigger: "change",
            }, ],
            sort: [{
              required: true,
              validator: (rule, value, callback) => {
                const req = /[^0-9]/g;
                if (!value) {
                  return callback(new Error("请输入排序"));
                } else {
                  if (req.test(value)) {
                    return callback(new Error("排序必须是数字且只能为整数"));
                  } else {
                    callback();
                  }
                }
              },
              trigger: "change",
            }, ],
            status: [{
              required: true,
              validator: (rule, value, callback) => {
                if (value === "") {
                  return callback(new Error("请选择状态"));
                } else {
                  callback();
                }
              },
              trigger: "change",
            }, ],
            type: [{
              required: true,
              validator: (rule, value, callback) => {
                if (value === "") {
                  return callback(new Error("请选择类型"));
                } else {
                  callback();
                }
              },
              trigger: "change",
            }, ],
            link_url: [{
              required: true,
              validator: (rule, value, callback) => {
                if (value === "") {
                  return callback(new Error("请输入链接/路径"));
                } else {
                  callback();
                }
              },
              trigger: "change",
            }, ],
            image_url: [{
              required: true,
              validator: (rule, value, callback) => {
                if (this.ruleForm.image_url === "") {
                  return callback(new Error("请上传图标"));
                } else {
                  callback();
                }
              },
              trigger: "change",
            }, ],
          },
          BannerDialog: false,
  
      };
    },
    created() {
        this.getBannersListWay();
      },
      methods: {
        getBannersListWay() {
          this.loading = true;
          getBannersList(this.listdata).then((res) => {
            if (res.code !== 200) {
              this.loading = false;
              return this.$messages.error(res.msg);
            }
            this.bannerList = res.data.list;
            this.total = res.data.total
            this.loading = false;
          });
        },
        addBannersWay() {
          this.title = "添加启动图";
          this.BannerDialog = true;
        },
        submitWay() {
          this.$refs.ruleForm.validate((valid, err) => {
            if (valid) {
              this.addPutLoading = true;
              if (this.ruleForm.id) {
                addBanners(this.ruleForm).then((res) => {
                  if (res.code !== 200) {
                    return this.$messages.error(res.msg);
                  }
                  this.handleClose();
                  this.$messages.success(res.msg);
                  this.addPutLoading = false;
                  this.BannerDialog = false;
                  this.getBannersListWay();
                });
              } else {
                addBanners(this.ruleForm).then((res) => {
                  if (res.code !== 200) {
                    return this.$messages.error(res.msg);
                  }
                  this.handleClose();
                  this.$messages.success(res.msg);
                  this.addPutLoading = false;
                  this.BannerDialog = false;
                  this.getBannersListWay();
                });
              }
            } else {
              return false;
            }
          });
        },
        handleClose() {
          this.ruleForm = {
            status:1,
            type: 1,
            switch:0,
            title: "",
            image_url: "",
            redirect_url: "",
            sort: '',
          };
          this.$refs.ruleForm.resetFields();
          this.image_url = {};
          this.BannerDialog = false
        },
        deltagsWay(row) {
          this.loading = true;
          delBanners({
            id: row.id
          }).then((res) => {
            if (res.code == 200) {
              this.$messages.success("删除成功");
              this.getBannersListWay();
            } else {
              this.$messages.error(res.msg);
            }
          });
        },
        // 修改
        puttagsWay(row) {
          this.title = "修改启动图";
          this.BannerDialog = true;
          this.addPutLoading = true;
            this.ruleForm = JSON.parse(JSON.stringify(row));
            this.image_url = {
              url: this.ruleForm.image_url,
            };
            this.addPutLoading = false;
  
        },
        image_urlCallback(file) {
          this.image_url = file;
          this.ruleForm.image_url = file.url;
        },
      },
    };
  </script>
  
  <style lang="scss" scoped>
  </style>
  